<template>
	<view class="g-scroll">
		<scroll-view class="g-scroll-view"
			scroll-y="true"
			:scroll-top="scrollTop"
			:refresher-threshold="refresherThreshold"
			:refresher-triggered="refresherTriggered"
			@scrolltolower="scrolltolower"
			@scroll="handleScroll"
			@touchstart="handleTouchstart"
			@touchmove="handleTouchmove"
			@touchend="handleTouchend">
			<view class="g-scroll-view__refresher"
				:style="'height:' + refresherHeight + 'px'">
				<view class="g-scroll-view__refresh">
					<g-loading />
				</view>
			</view>
			<view class="">
				<slot />
				{{showNoMoreText}} dd--ss {{noMore}}
				<view class="g-scroll-view__noMore">
					<text v-if="showNoMoreText && noMore"
						class="g-scroll-view__noMore-text">
						{{ noMoreText ? noMoreText : "没有更多数据了..." }}
					</text>
					<text v-else
						class="g-scroll-view__noMore-text">
						{{isLoading ? '加载中...':'上拉加载更多数据...'}}
					</text>
				</view>

			</view>
			<uni-transition mode-class="fade"
				:show="isShowScrollTop">
				<template>
					<view class="g-scroll-view__scroll-top"
						@click="backTop">
						返回顶部
					</view>
				</template>
			</uni-transition>

		</scroll-view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		nextTick
	} from 'vue';

	const props = defineProps({
		refresherThreshold: {
			type: Number,
			default: 30
		},
		refresherTriggered: {
			type: Boolean,
			default: false
		},
		// 关闭下拉
		closeRefresher: {
			type: Boolean,
			default: false
		},
		showScrollTopBtn: {
			type: Boolean,
			default: true
		},
		noMore: { //没有更多数据了
			type: Boolean,
			default: false
		},
		noMoreText: { //没有更多数据的文本
			type: String
		},
		isLoading: {
			type: Boolean,
			default: false
		},
		showNoMoreText: {
			type: Boolean,
			default: true
		}
	})
	const startY = ref(0);
	const moveY = ref(0);
	const refresh = ref(false)
	const $emit = defineEmits(['scrolltolower'])
	const refresherHeight = ref(0)
	const handleTouchstart = e => {
		if (props.closeRefresher) return
		startY.value = e.touches[0].clientY
	}
	const handleTouchmove = e => {
		if (props.closeRefresher) return
		moveY.value = e.touches[0].clientY
		const moveDistance = moveY.value - startY.value;
		if (moveDistance > props.refresherThreshold) {
			refresh.value = true
			refresherHeight.value = props.refresherThreshold
		} else {
			refresherHeight.value = 0
			refresh.value = false
		}
	}
	const handleTouchend = e => {
		if (props.closeRefresher) return
		refresherHeight.value = 0
		if (refresh.value) {
			refresh.value = false
			// 触发下拉刷新的方法
			$emit("handleRefresher")
		}
	}

	// 触底的时候触发
	const scrolltolower = e => {
		$emit('scrolltolower', e)
	}

	const old = ref({
		scrollTop: 0
	})
	const scrollTop = ref(0);

	// 滚动的时候触发
	const handleScroll = e => {
		const {
			detail: {
				scrollTop
			},
		} = e;

		old.value.scrollTop = scrollTop
	}

	const isShowScrollTop = computed(() => {
		return props.showScrollTopBtn && old.value.scrollTop > 200
	})

	const backTop = e => {
		scrollTop.value = old.value.scrollTop;
		nextTick(() => {
			scrollTop.value = 0
		})
	}
</script>

<style lang="scss"
	scoped>
	.g-scroll {
		height: 1000rpx;

		&-view {
			height: 100%;

			&__refresher {
				height: 45px;
				position: relative;
				overflow: hidden;
				top: 1%;
				left: 0;
				width: 100%;
			}

			&__noMore {
				text-align: center;
				color: lightgrey;
				font-size: 24rpx;
				padding: 20rpx 0;

				&-text {
					display: inline-block;
					position: relative;

					&:before,
					&:after {
						position: absolute;
						top: 50%;
						transform: translateY(-50%) scaleY(0.5);
						content: '';
						height: 1px;
						width: 100rpx;
						background: #cecece;
					}

					&:before {
						left: calc(100% + 20rpx);
					}

					&:after {
						right: calc(100% + 20rpx);
					}
				}
			}

			&__scroll-top {
				width: 96rpx;
				height: 96rpx;
				background-color: ghostwhite;
				color: #333;
				font-size: 24rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				position: fixed;
				bottom: 60rpx;
				right: 60rpx;
				border-radius: 50%;
				z-index: 10;
				box-shadow: 0 0 16rpx 0 var(--shadow);
			}
		}


	}
</style>